<template>
	<view class="container">
		<view :id="scrollBorderId" class="model-scroll" :style="{ maxHeight: `${maxHeight}rpx` }">
			<view
				:id="scrollId"
				:class="{ scroll: !touch.allow }"
				@touchstart="touchstart"
				@touchmove="touchmove"
				@touchend="touchend"
				:style="{ transform: `translateY(${touch.end}rpx)` }"
			>
				<view class="mask_bg" v-for="(item, index) in modelList" :key="index">
					<view style="width: 496rpx;height: 24rpx;background: #F7F7F7;margin: auto;" v-if="index !== 0"></view>
					<view style="font-size: 36rpx;color: #66645D;padding-top: 36rpx;" v-if="index == 0 && modelList.length > 1">{{ item.medalName }}</view>
					<view class="model_bg"><image :src="item.medalImgUrl" mode="aspectFill"></image></view>
					<view class="title">
						<text class="ring"></text>
						<text class="line"></text>
						<text class="title-center">{{ item.medalLevelName }}</text>
						<text class="line"></text>
						<text class="ring"></text>
					</view>
					<view class="list" v-if="item.medalType == '1'">
						<view class="list_item list-line" style="font-weight: 500;">
							<view>任务行为</view>
							<view>次数</view>
						</view>
						<view v-if="item.actionVoList">
							<view class="list_item list-line" v-for="(_item, index) in item.actionVoList" :key="index">
								<view>{{ _item.actionName }}</view>
								<view>{{ _item.actionCount }}次</view>
							</view>
						</view>
					</view>
					<view v-if="item.medalType == '2'">
						<view class="specialC">{{ item.medalRemark || '' }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="close" @click="close()"><text class="btn">关闭</text></view>
	</view>
</template>

<script>
import { getUUID } from '../../common/utils.js';
const init = {
	start: 0,
	end: 0,
	allow: false,
	remember: 0,
	never: true,
	borderHeight: 0,
	height: 0
};
export default {
	inject: ['popup'],
	data() {
		const info = uni.getSystemInfoSync();
		const scale = 750 / info.windowWidth;
		const maxHeight = scale * (info.windowHeight - 160);
		return { touch: { ...init }, maxHeight, scale, scrollId: 'scroll_' + getUUID(8), scrollBorderId: 'scroll_' + getUUID(8) };
	},
	props: {
		list: Array,
		name: String,
		img: String,
		medalType: [String, Number],
		specialCont: String,
		modelList: {
			type: Array,
			default() {
				return {};
			}
		}
	},
	watch: {
		modelList: {
			handler(list) {
				this.$nextTick(() => {
					if (list && list.length) {
						setTimeout(r => {
							Promise.all([
								new Promise(resolve => {
									const query = uni.createSelectorQuery().in(this);
									query
										.select('#' + this.scrollId)
										.boundingClientRect(rect => {
											resolve(rect.height);
										})
										.exec();
								}),
								new Promise(resolve => {
									const query = uni.createSelectorQuery().in(this);
									query
										.select('#' + this.scrollBorderId)
										.boundingClientRect(rect => {
											resolve(rect.height);
										})
										.exec();
								})
							]).then(res => {
								if (res[0] <= res[1]) {
									this.touch.never = true;
								} else if (res[0] > res[1]) {
									this.touch.never = false;
									this.touch.height = res[0] * this.scale;
									this.touch.borderHeight = res[1] * this.scale;
								}
							});
						}, 500); //受到uni-popup-scroll动画效果影响，延迟500毫秒
					} else {
						this.touch = { ...init };
					}
				});
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		touchstart(e) {
			if (!this.touch.never) {
				this.touch.start = e.touches[0].pageY * this.scale;
				this.touch.allow = true;
				this.touch.startTime = Date.now();
			}
		},
		touchmove(e) {
			if (!this.touch.never && this.touch.allow) {
				this.touch.current = e.touches[0].pageY * this.scale;
				this.touch.end = this.touch.remember + this.touch.current - this.touch.start;
			}
		},
		touchend(e) {
			if (!this.touch.never && this.touch.allow) {
				this.touch.allow = false;
				setTimeout(r => {
					const time = Date.now();
					const c = time - this.touch.startTime;
					if (c < 1000) {
						this.touch.end = this.touch.end + (this.touch.current - this.touch.start) * (1000 / c) * 10;
					}
					const scrollHeight = this.touch.borderHeight - this.touch.height;
					if (this.touch.end < scrollHeight) {
						this.touch.end = scrollHeight;
					} else if (this.touch.end > 0) {
						this.touch.end = 0;
					}
					this.touch.remember = this.touch.end;
				}, 0);
			}
		},
		close() {
			setTimeout(r => {
				this.$emit('update:modelList', []);
			}, 200);
			this.popup.close();
		}
	}
};
</script>

<style lang="less" scoped>
.container {
	width: 670rpx;
	position: relative;
	border-radius: 12rpx;
	overflow: hidden;
	background: #fff url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/medal_bg.png) no-repeat center top;
	background-size: 100% calc(100% - 88rpx);

	.model-scroll {
		min-height: 414rpx;
		overflow: hidden;
		border-radius: 12rpx 12rpx 0 0;
		-webkit-overflow-scrolling: touch;
		.scroll {
			-webkit-overflow-scrolling: touch;
			transition: transform 0.6s cubic-bezier(0, 1, 0.5, 1);
		}
	}
}
.specialC {
	font-size: 32rpx;
	color: #66645d;
	padding: 80rpx 0 140rpx 0;
}
/deep/.uni-popup__wrapper-box {
	position: absolute;
	left: 40rpx;
	right: 40rpx;
}
.close {
	text-align: center;
	.btn {
		width: 100%;
		display: block;
		height: 88rpx;
		line-height: 88rpx;
		background: #f7f7f7;
		border: 2rpx solid #f7f7f7;
		color: #66645d;
		font-size: 30rpx;
		text-align: center;
	}
}
.mask_bg {
	text-align: center;
	// position: relative;
	.rule {
		font-size: 36rpx;
		color: #66645d;
		padding: 36rpx 0 0 20rpx;
	}
	.model_bg {
		height: 200rpx;
		background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/home/bg.png) no-repeat center top;
		background-size: 270rpx 200rpx;
		padding-top: 40rpx;
		margin-top: 20rpx;
		image {
			width: 150rpx;
			height: 150rpx;
		}
	}
	.title {
		font-size: 32rpx;
		color: #66645d;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 18rpx;
		.ring {
			width: 10rpx;
			height: 10rpx;
			background: #d8d8d8;
			border-radius: 100%;
			margin: 0 8rpx;
		}
		.line {
			height: 2rpx;
			background: #979797;
			width: 60rpx;
			transform: scaleY(0.5);
		}
		.title-center {
			line-height: 46rpx;
			color: #66645d;
			font-size: 32rpx;
			font-weight: 400;
			margin: 0 24rpx;
		}
	}
	.list {
		margin: 0 80rpx;
		.list_item {
			display: flex;
			justify-content: space-between;
			color: #66645d;
			font-size: 26rpx;
			align-items: center;
			padding: 30rpx 80rpx;
			font-weight: 300;
		}
		.list-line {
			position: relative;
			&::after {
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				height: 2rpx;
				bottom: 0;
				transform: translateY(0.5);
				background-color: rgba(102, 100, 93, 0.1);
			}
			&:last-child {
				&::after {
					height: 0;
				}
			}
		}
	}
}
</style>
